<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <style>
        .aa{
            background-color: aqua;
        }
        .bb{
            color: red;
        }
    </style>
</head>

<body>
    <table border="1">
        <caption>表格标题</caption>
        <tr>
            <th id="b1">班级</th>
            <th>学号</th>
            <th>姓名</th>
        </tr>
        <tr>
            <td colspan="2" align="center">横跨 colspan="2"</td>
            <td align="center">6</td>

        </tr>
        <tr>
            <td>3</td>
            <td>0</td>
            <td>0</td>

        </tr>
        <tr>
            <td>/</td>
            <td>7</td>
            <td>7</td>
        </tr>
    </table>

    <ul>
        <li id="a1" class="bb">111</li>
        <li>22</li>
        <li>22</li>
        <li>22</li>

    </ul>






    <script>
        // window.onload = function () {
        //     let trs = document.getElementsByTagName("tr");
        //     for (let i = 0; i < trs.length; i++) {
        //         if (i % 2 == 0) {
        //             let obj = trs[i];
        //             obj.style.backgroundColor = "#ccc"
        //         }
        //     }
        // }

        /////jQuery基础语法的三要素

        // $()----工厂函数，把DOM对象转为JQuery对象
        // document----选择器，选取要操作的DOM元素
        // ready()---方法
        $(document).ready(function () {
            $("tr:even").css("background-color", "#ccc").css("color","red")
        })

        $("li").click(function(){
            // $("#a1").css("background-color","#ccc")
            // $("#a1").addClass("aa")
            // $("#a1").css({"background-color":"red","color":"#fff","display":"none"})
            $("#a1").css({"background-color":"red","color":"#fff"}).hide()

            // show()===css("display","block")//显示
            //hide()===css("display","none")//隐藏

        })

        // addclass追加样式，不会对之前的样式覆盖
        // 获取元素样式的属性css()
        // css("display")//获取
        // css("display","none")//设置
        // 添加多个样式css({"color":"#fff","xxxx":"bbbb"})



       

        // $(document).getElementById(),不能这样写，dom对象和jq对象不能互用

    </script>

</body>

</html>